<!-- 订单管理-待发货订单 -->
<template>
  <div>
    <el-card style="max-width: 100%;">
      <search-box
        :tableDataInput="tableData"
        :searchField="'number'"
        @search="handleSearch"
      ></search-box>
      <el-table
        :data="selectedItems"
        style="margin-top: 16px;font-size: 16px;"
        :header-cell-style="{ background: '#EBEEF2' }"
        :row-style="{ height: '80px' }"
      >
        <el-table-column
          prop="id"
          width="150px"
          label="订单编号"
        />
        <el-table-column
          label="商品信息"
          width="180"
        >
          <template slot-scope="scope">
            <el-tree
              :data="scope.row.sortTree"
              :props="defaultProps"
              node-key="label"
              @node-click="handleNodeClick(scope.row, $event)"
              @node-expand="open(scope.$index, scope.row)"
              @node-collapse="close(scope.$index, scope.row)"
            >
              <template v-slot="{ node, data }"> <!-- 使用 v-slot 而不是 slot-scope -->
                <div
                  class="tree-node-note"
                  :class="{
                  'parent-node': !node.isLeaf,
                  'child-node': node.isLeaf
                }"
                >
                  <div>
                    <img
                      v-if="!node.isLeaf"
                      :src="node.expanded ? collapsedIcon : expandedIcon"
                      class="fa-folder"
                    />
                    <!-- {{ node.label }} -->
                    <span @click="gotodetail(id)">{{ node.label }}</span>
                  </div>
                  <p style=" font-size: 10px; margin-left: 5px; color: rgba(167, 180, 204, 1);">{{
                    data.note }}</p>
                </div>
              </template>
            </el-tree>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <div class="li_div">
              {{ scope.row.createTime }}
            </div>
            <div v-if="scope.row.nodeStatus != 'father'">
              <div
                class=" tree-node-note li_div"
                v-for="(item, index) in scope.row.countList"
                :key="index"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderAmount"
          label="订单金额"
          align="center"
        >
          <template slot-scope="scope">
            <div class="tree-node-note-center">
              ¥{{ scope.row.orderAmount }}
            </div>
            <div v-show="scope.row.nodeStatus != 'father'">
              <div
                class="tree-node-note-center"
                v-for="(item, index) in scope.row.countList"
                :key="index"
              >
                ¥{{ item }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="收货人名称"
          align="center"
        >
          <template slot-scope="scope">
            <div class="tree-node-note-center">
              {{ scope.row.receiverName }}
            </div>
            <div v-show="scope.row.nodeStatus != 'father'">
              <div
                class="tree-node-note-center"
                v-for="(item, index) in scope.row.countList"
                :key="index"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120"
          prop="receiverDetailAddress"
          label="收货地址"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div class="tree-node-note">
              {{ scope.row.receiverDetailAddress }}
            </div>
            <div v-show="scope.row.nodeStatus != 'father'">
              <div
                class="tree-node-note"
                v-for="(item, index) in scope.row.countList"
                :key="index"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverPhone"
          label="联系电话"
        >
          <template slot-scope="scope">
            <div class=" tree-node-note">
              {{ scope.row.receiverPhone }}
            </div>
            <div v-show="scope.row.nodeStatus != 'father'">
              <div
                class=" tree-node-note"
                v-for="(item, index) in scope.row.countList"
                :key="index"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
          width="250px"
        >
          <template slot-scope="scope">
            <div>
              <span @click="openOrderDetail(scope.$index, scope.row)">
                <img
                  src="../../assets/order/orderDetail.svg"
                  class="orderDetail"
                >
                <span style="margin-right: 40px;">订单详情</span>
              </span>
              <span @click="delivery(scope.$index, scope.row)">
                <img
                  src="../../assets/order/delivery.svg"
                  class="delivery"
                >
                <span>发货</span>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      background
      layout="->,prev, pager,next,total"
      :page-size="10"
      :total="tableDataLength"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;"
    >
    </el-pagination>

    <ToBeShippedOrderDetail
      style="width: 100%;height: 31.25rem;overflow-y: auto;"
      v-if="dialogVisible1"
      :time.sync="time"
      :data.sync="data"
      :dialogVisible1.sync="dialogVisible1"
      @closeDialog="handleClose"
    >
    </ToBeShippedOrderDetail>
    <ProductdetailVue
      v-if="showdetail"
     :showProductDetail="showdetail"
     @close="closeProdetail"></ProductdetailVue>
     <Delivery  :id.sync="orderid" :visible.sync ="showdelivery" @close="closedelivery"></Delivery>
  </div>
</template>

<script>
import ToBeShippedOrderDetail from "../../views/order/components/ToBeShippedOrderDetail.vue";
import {
  getToBeShippedOrders,
  getToBeShippedOrderDetail,
  deliverGoods,
} from "@/api/api";
import ProductdetailVue from './components/Productdetail.vue';
import Delivery from "./components/Delivery.vue";

export default {
  components: {
    ToBeShippedOrderDetail,
    ProductdetailVue,
    Delivery
  },
  data() {
    return {
      selectedItems: [],
      orderid:"",
      showdelivery: false,
      showdetail: false,
      expandedIcon: require("@/assets/order/加.png"),
      collapsedIcon: require("@/assets/order/减.png"),
      currentRowData: null, // 用于存储当前行的数据
      tableData: [],
      tableDataLength: 0,
      Visible: false,
      dialogVisible1: false, // 弹窗
      data: [], // 弹窗数据
      time: "", // 弹窗时间
      toshippeddeatil: {
        //发送的参数
        shopId: sessionStorage.getItem('shopid'),
        pageNo: 1,
      },
      sortTree: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      deliveryinfo: [], //发货参数
    };
  },
  async created() {
    await this.getToBeShippedOrders(this.toshippeddeatil);
  },
  updated() {
    console.log("这是更新内容");
    console.log(this.selectedItems);
  },
  methods: {
    // 关闭弹窗
    closeProdetail(data) {
      this.showdetail = false;
    },
    //去到商品详情
    gotodetail(id) {
      console.log(id);
      this.$message.success("跳转到商品详情页面");
      
    },
    //刷新页面
    refresh() {
      this.getToBeShippedOrders(this.toshippeddeatil);
    },
    //将数据转换成树形结构
    getdatatransfortree(data) {
      for (let i = 0; i < data.length; i++) {
        const sortTree = [
          {
            label: data[i].orderTitle,
            children: [],
          },
        ];

        this.$set(data[i], "nodeStatus", "father");
        const countList = [];
        data[i].listProductOrderInfos.forEach((info) => {
          // 解析 spData JSON 字符串
          const spDataParsed = JSON.parse(info.spData);
          const note = spDataParsed.find((item) => item.value)
            ? spDataParsed.find((item) => item.value).value
            : ""; // 查找第一个非空 value

          countList.push(info.commodityPrice);

          // 添加到 children 数组
          sortTree[0].children.push({
            label: info.commodityName,
            payNumber: info.payNumber,
            note: note, // 如果 note 为空，则不会添加到子对象中
          });
        });

        // 返回构建好的 sortTree
        data[i].sortTree = sortTree;
        data[i].countList = countList;
      }
      return data;
    },
    async getToBeShippedOrders(data) {
      try {
        const res = await getToBeShippedOrders(data);
        if (res.data.code == 200) {
          this.selectedItems = res.data.result.records;
          this.getdatatransfortree(this.selectedItems);
          this.tableData = res.data.result.records;
          this.tableDataLength = res.data.result.total;
          console.log(this.selectedItems);
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleCurrentChange(val) {
      this.toshippeddeatil.pageNo = val;
      this.getToBeShippedOrders(this.toshippeddeatil);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    open(index, row) {
      console.log("节点打开");
      row.nodeStatus = "child";
    },
    close(index, row) {
      console.log("节点关闭");
      row.nodeStatus = "father";
    },
    handleSearch(name) {
      this.toshippeddeatil.name = name;
      this.getToBeShippedOrders(this.toshippeddeatil);
      // this.selectedItems = filtered;
    },
    handleClose() {
      this.dialogVisible1 = false;
    },
    handleOpenDialog(value) {
      console.log(value);
      this.dialogVisible1 = true;
    },
    openOrderDetail(index, row) {
      console.log(index);
      console.log(row);
      this.time = row.createTime;
      this.getData(row);
    },
    //发货
    async delivery(index, row) {
      console.log(row);
      this.orderid = row.id;
      //展示发货弹窗
      this.showdelivery = true;
    },
    //关闭发货弹窗
    closedelivery(data) {
      this.showdelivery = data;
    },
    //获取弹窗数据
    async getData(row) {
      // console.log(row.id);
      const res = await getToBeShippedOrderDetail(row.id);
      if (res.data.code == 200) {
        console.log("打印订单详情");
        console.log(res.data.result);
        this.data = res.data.result;
        this.dialogVisible1 = true;
      } else {
        this.$message.error("获取订单详情失败");
      }
    },
  },
};
</script>

<style scoped>
.input1 {
  font-size: 16px;
  width: 241px;
  opacity: 1;
  border-radius: 80px;
  background: rgb(153, 155, 158);
}

.input1 >>> input.el-input__inner {
  background: rgba(235, 238, 242, 1);
  border-radius: 20px;
}
.tree-node-note-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 默认对齐方式，与 label 对齐 */
  justify-content: center;
  /* 垂直居中子元素 */
  color: rgba(52, 69, 99, 1);
  font-size: 14px;
  height: 35px;
  line-height: 15.6px;
}
.li_div {
  display: flex;
  flex-direction: column;
  /* width: 150px; */
  align-items: center;
  /* padding-top: 40px; */
  justify-content: center;
  /* 默认对齐方式，与 label 对齐 */
  font-size: 14px;
}
.orderDetail {
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.delivery {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-footer {
  background: rgba(247, 249, 252, 1) !important;
  margin-right: 1rem;
  height: 5rem;
  margin-left: none;
  width: 100%;
}

.el-button--purple {
  background-color: #722ed1;
  /* 紫色背景 */
  border-color: #722ed1;
  /* 紫色边框 */
  color: #fff;
  /* 白色文字 */
}

.tree-node-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 默认对齐方式，与 label 对齐 */
  justify-content: center;
  /* 垂直居中子元素 */
  color: rgba(52, 69, 99, 1);
  font-size: 14px;
  height: 35px;
  /* border: 1px solid black; */
  line-height: 15.6px;
  /* background-color: antiquewhite;   */
  /* margin-left: 20px; */
}

.tree-node-note-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 默认对齐方式，与 label 对齐 */
  justify-content: center;
  /* 垂直居中子元素 */
  color: rgba(52, 69, 99, 1);
  font-size: 14px;
  height: 35px;
  line-height: 15.6px;
}

.tree-node-note.parent-node {
  /* margin-left: 30px; */
  width: 100%;
  /* background-color: aqua; */
  margin-left: 0;
}

.tree-node-note.child-node {
  /* margin-left: 30px; */
  width: 100%;
  /* background-color: aqua; */
  margin-left: 10px;
}

.tree-node-note .fa-folder {
  margin-right: 1px;
  /* 与文本之间添加一些间距 */
  /* 其他图标样式 */
  width: 10px;
  height: 10px;
}

/* 假设你有一个类名来标识需要修改图标的父节点 */
::v-deep .el-tree .el-tree-node__expand-icon {
  /* 隐藏默认的图标 */
  display: none;
}

.con_div_img {
  width: 11.67px;
  height: 13.33px;
  vertical-align: middle;
  /* 可以让图片与文本垂直居中 */
}

.con_div_span {
  /* 调整间距，使文本与图片之间有一定的距离 */
  font-size: 12px;
  vertical-align: middle;
  /* 与图片垂直对齐 */
  display: inline-block;
  /* 确保span是内联块元素 */
  margin-top: 6px;
}

.li_div {
  display: flex;
  flex-direction: column;
  /* width: 150px; */
  align-items: center;
  /* padding-top: 40px; */
  justify-content: center;
  /* 默认对齐方式，与 label 对齐 */
  font-size: 14px;
}

/* tree节点高度 */
.el-table td.el-table__cell div >>> .el-tree-node__content {
  height: 35px;
  width: 100%;
}

.custom-tree-node {
  display: flex;
  align-items: center;
}
</style>